<template>
  <div class="recommend">
     <div v-for="(item,index) in recommends" :key="index">
        <a :href="item.link"  class="recommendItem">
          <img :src="item.image" alt="">
          <div>{{item.title}}</div>
        </a>
     </div>
  </div>
</template>

<script>
export default {
   name:"HomeRecommendView",
   props:{
     recommends:{
        type:Array,
        default(){
          return []
        }   
     }
   }
}
</script>

<style>
 .recommend {
   display: flex;
   justify-content:space-around;
   align-items: center;
   padding: 15px 0;
   width: 100%;
   border-bottom: 10px solid #eee;
 }

 .recommendItem {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
 
.recommendItem img {
  width: 80%;
  height: 80%;
}

.recommendItem div {
  padding:10px 0;
  font-size: 14px;
}

</style>